<template>
	<div>
		<el-table
		  ref="tipsTable"
		  :data="tableData"
		  border
		  @row-click="rowClick"
		  @selection-change="changeSelect"
		  :row-style="rowClass"
		  height="450px"
		  style="width: 100%; margin-bottom: 10px"
		>
		  <el-table-column type="selection" width="55"> </el-table-column>
		  <el-table-column
		    v-for="item in thead"
		    :key="item.col_name"
		    :prop="item.col_name"
		    :label="item.show_name"
		    :width="item.list_width"
        :show-overflow-tooltip="true"
		    align="center"
		  ></el-table-column>
		</el-table>
		<!-- 分页组件 -->
		<el-pagination
		  v-if="page.pageCount != 1"
		  background
		  layout="prev, pager, next"
		  @current-change="changePage"
		  :page-count="page.pageCount"
		  style="text-align: right"
		>
		</el-pagination>
	</div>
</template>

<script>

	export default{
		props:["tableid","module","order","notsearch"],
		data(){
			return {
				//tableid:"32",//表id
				thead:[],//表头
				tableData:[],//数据
				searchInputDtos:[],//获取查询的数据
				page: {
				  pageNumber: 1,
				  pageSize: 20,
				  pageCount: 1,
				},
				chooseArr: [],
				selectRow: [],
				selectStr: "",
			};
		},
		created() {
		  if(!this.notsearch){
        this.getData();
      }
		},
		methods:{
			//自定义查询
			f_search(dto){
				this.page.pageNumber = 1;
				this.searchInputDtos = dto;
				this.getData();
			},
			async getData(){
				var parms = {
					orderBy:this.order,
					tableid:this.tableid,
					pageNumber: this.page.pageNumber,
					pageSize: this.page.pageSize,
          listmodule:this.module,
					searchInputDtos:this.searchInputDtos
				};
				let res = await api.postBody("/admin/api/system/SystemCommonBusinessController/listCommon",parms);
				this.thead = res.data.listColumn;
				this.tableData = res.data.rows;
				this.page.pageCount = parseInt(res.data.pageCount);
			},
			//分页改变
			changePage(page) {
				this.page.pageNumber = page;
				this.getData();
			},
			// 点击表格行
			rowClick(row) {
			  this.$refs.tipsTable.toggleRowSelection(row);
			},
			// 监听多选框
			changeSelect(selection) {
			  this.chooseArr = selection;
			  if (selection.length == 0) {
			    this.selectStr = "";
			  } else {
			    for (let i = 0; i < selection.length; i++) {
			      if (i == 0) {
			        this.selectStr = selection[i].id;
			      } else {
			        this.selectStr = this.selectStr + "," + selection[i].id;
			      }
			    }
			  }
			},
			// 多选高亮选中行
			rowClass({row, rowIndex}){
			  if(this.selectRow.includes(rowIndex)){
			    return { "background-color": "#5aabff" }
			  }
			},

		},
		 watch:{
		  chooseArr(data){
		    this.selectRow = [];
		    if (data.length > 0) {
		      data.forEach((item, index) => {
		        this.selectRow.push(this.tableData.indexOf(item));
		      });
		    }
		  }
		}
	}
</script>

<style>
</style>
